<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登入 - 蓝丞旅游酒店后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/login.css" media="all">
    <script src="/static/js/jquery-1.11.1.min.js"></script>
    <script src="/static/js/echarts.js"></script>
    <style>
        .big{
            width: 95%;
            background: #fff;
            margin: 0 auto;
            box-shadow:0px 3px 8px 0px rgba(124,147,191,0.21);
            border-radius:3px;
            margin-top: 40px;
            height: 800px;
        }
        .layui-fluid{
            padding: 0px;
        }
        .lan{
            width:12px;
            height:29px;
            background:rgba(85,165,255,1);
        }
        .row{
            padding-top: 50px;
        }
        .rank{
            width:100px;
            height:19px;
            font-size:20px;
            font-family:Source Han Sans SC;
            font-weight:400;
            color:rgba(85,165,255,1);
            margin-left: 40px;
        }
        .rank2{
            width:135px;
            height:19px;
            font-size:20px;
            font-family:Source Han Sans SC;
            font-weight:400;
            color:rgba(85,165,255,1);
            margin-left: 40px;
        }
        .order_num{
            font-size:16px;
            font-family:Source Han Sans SC;
            font-weight:400;
            color:rgba(255,69,69,1);

        }
        .order_title{
            font-size:14px;
            font-family:Source Han Sans SC;
            font-weight:500;
            color:rgba(92,92,92,1);

        }
        .wei{
            display: flex;

            align-items: center;
            padding-top: 40px;
        }
        .layui-tab-title{
            border-bottom-style:none;
        }
        .layui-tab-brief > .layui-tab-title .layui-this::after{
            border-bottom: none;
        }
        .layui-tab-title li{
           font-size: 18px;
            font-family:Source Han Sans SC;
            font-weight:500;
            color:rgba(151,151,151,1);
        }
       .layui-tab-brief > .layui-tab-title .layui-this{
           color:rgba(85,165,255,1);
       }
        .layui-tab-content{
            height: 330px;
            width: 900px;
            margin-left: 17px;

        }
        .right{
            float: left;
            height: 330px;

        }
        .circle{
            width:10px;
            height:10px;
            background:rgba(85,165,255,1);
            border-radius:50%;
            float: left;
            margin-top: 9px;
            margin-right: 10px;
        }
        .content{
            width:230px;
            height:16px;
            font-size:16px;
            font-family:Source Han Sans SC;
            font-weight:500;
            color:rgba(92,92,92,1);
        }
        .circle1{
            width:10px;
            height:10px;
            background:rgba(51,232,194,1);
            border-radius:50%;
            float: left;
            margin-top: 9px;
            margin-right: 10px;
        }
        .year{
            width: 900px;
            margin-left:100px;

        }
        .left{
            margin-right: 160px;
            float: right;
        }
        .left li{
            width: 60px;
            float: left;
        }
        .day{
            width:7px;
            height:7px;
            background:rgba(151,151,151,1);
            border-radius:50%;
            float: left;
            margin-top: 9px;
            margin-right: 6px;
        }
        .se{
            width:7px;
            height:7px;
            background:rgba(85,165,255,1);
            border-radius:50%;
            float: left;
            margin-top: 9px;
            margin-right: 6px;
        }
        .hui{
            font-size:16px;
            font-family:Source Han Sans SC;
            color:rgba(151,151,151,1);
        }
        .yan{
            font-size:16px;
            font-family:Source Han Sans SC;
            color:rgba(85,165,255,1);
        }
        li{
            cursor: pointer;
        }
        .center{
            display: flex;
            align-items: center;
            flex-direction: column;
        }
    </style>
</head>
<body>

<div class="layui-fluid big">

    <div class="layui-row">
        <div class="row">
            <div class="layui-col-md1 lan">

            </div>
        </div>
        <div class="layui-col-md3 rank">
            待处理任务
        </div>
    </div>

    <div class="layui-row">
        <div class="wei">
            <div class="layui-col-md1 center" style="margin-left: 30px;cursor: pointer" onclick="order()">
                <p class="order_num">&nbsp;({$no_order})</p>
                <p class="order_title">待核销订单</p>
            </div>
            <div class="layui-col-md1 center" style="margin-left: 30px;cursor: pointer" onclick="d_order()" >
                <p class="order_num">&nbsp;({$shen_order})</p>
                <p class="order_title">待确认订单</p>
            </div>
        </div>
    </div>

    <div class="layui-row">
        <div class="row">
            <div class="layui-col-md1 lan">

            </div>
        </div>
        <div class="layui-col-md3 rank2">
           业务金额统计
        </div>
    </div>
    <div>
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin-left: 38px;margin-top: 40px;">
            <ul class="layui-tab-title">
                <li class="layui-this">订单业务额</li>
                <li>实际收益额</li>

            </ul>
            <div class="layui-tab-content" style="float: left">
                <div class="layui-tab-item layui-show">
                    <div id="one" style="width: 900px;height:330px;"></div>
                    <div class="year">
                        <ul class="left">
                            <li id="week">
                                <p class="day se" id="p1"> </p>
                                <p class="hui yan" id="p2">天</p>
                            </li>
                            <li id="month">
                                <p class="day" id="p3"> </p>
                                <p class="hui" id="p4">月</p>
                            </li>

                        </ul>
                    </div>
                </div>
                <div class="layui-tab-item" >
                    <div id="two" style="width: 900px;height:330px;"></div>
                    <div class="year">
                        <ul class="left">
                            <li id="week1">
                                <p class="day se" id="p5"> </p>
                                <p class="hui yan" id="p6">天</p>
                            </li>
                            <li id="month1">
                                <p class="day" id="p7"> </p>
                                <p class="hui" id="p8">月</p>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="layui-row" style="margin-top: 50px">
                    <div class="layui-col-md6" style="margin-left: 40px">
                        <p class="circle"> </p>
                        <p class="content">订单业务总额： {$all_money}元</p>
                    </div>
                    <div class="layui-col-md2" style="margin-left: 30px">
                        <p class="circle"> </p>
                        <p class="content">本月订单业务额： {$month_money}元</p>
                    </div>
                </div>
                <div class="layui-row" style="margin-top: 50px">
                    <div class="layui-col-md12" style="margin-left: 40px">
                        <p class="circle"> </p>
                        <p class="content">今日订单业务额：{$today_money}元</p>
                    </div>
                </div>

                <div class="layui-row" style="margin-top: 70px">
                    <div class="layui-col-md6" style="margin-left: 40px">
                        <p class="circle1"> </p>
                        <p class="content">实际收益总额： {$all}元</p>
                    </div>
                    <div class="layui-col-md2" style="margin-left: 30px">
                        <p class="circle1"> </p>
                        <p class="content">本月实际收益额： {$month_read}元</p>
                    </div>
                </div>
                <div class="layui-row" style="margin-top: 50px">
                    <div class="layui-col-md6" style="margin-left: 40px">
                        <p class="circle1"> </p>
                        <p class="content">今日实际收益额： {$today_fee}元</p>
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>

<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
    function order() {
        top.layui.index.openTabsPage("{:url('Order/outinorder')}",'待核销订单');
    }

    function d_order() {
        top.layui.index.openTabsPage("{:url('Order/affirmorder')}",'待确认订单');
    }
</script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'user'], function(){
        var $ = layui.$
            ,setter = layui.setter
            ,admin = layui.admin
            ,form = layui.form
            ,router = layui.router()
            ,search = router.search
            ,element = layui.element;

        form.render();


    });


    //订单业务额 月展示
    $("#month").click(function () {
        $("#p1").removeClass('se');
        $("#p2").removeClass('yan');
        $("#p3").addClass('se');
        $("#p4").addClass('yan');
        $.ajax({
            url: "{:url('Console/order_month')}",
            type: 'post',
            dataType: 'json',
            data: {},
            success: function(msg){

                var myChart = echarts.init(document.getElementById('one'));
                    var option = {
                        xAxis: {
                            type: 'category',
                            data: msg.week,
                            nameTextStyle:{
                              fontSize:10
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#333',
                                    type:'dashed'
                                }
                            },
                            axisTick:{

                            },
                            axisLabel:{

                            },
                            splitLine: {
                                lineStyle: {
                                    // 使用深浅的间隔色
                                    color: ['#aaa', '#ddd']
                                }
                            }
                        },
                        yAxis: {
                            type: 'value',
                            nameLocation:'end',
                            axisLine:{

                            }
                        },
                        series: [{
                            data: msg.zong,
                            type: 'line',
                            smooth: true,
                            lineStyle:{
                                color:'#55A5FF',
                            },
                            itemStyle:{
                                color:'#55A5FF'
                            },
                            label: {
                                show: true,
                            },
                        }]
                    };


                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
        });
    })
    //订单业务额 周展示
    $("#week").click(function () {
        $("#p3").removeClass('se');
        $("#p4").removeClass('yan');
        $("#p1").addClass('se');
        $("#p2").addClass('yan');
        $.ajax({
            url: "{:url('Console/order_week')}",
            type: 'post',
            dataType: 'json',
            data: {},
            success: function(msg){

                var myChart = echarts.init(document.getElementById('one'));
                var option = {
                    xAxis: {
                        type: 'category',
                        data: msg.week,
                        nameTextStyle:{
                            fontSize:10
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#333',
                                type:'dashed'
                            }
                        },
                        axisTick:{

                        },
                        axisLabel:{

                        },
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ['#aaa', '#ddd']
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        nameLocation:'end',
                        axisLine:{

                        }
                    },
                    series: [{
                        data: msg.zong,
                        type: 'line',
                        smooth: true,
                        lineStyle:{
                            color:'#55A5FF',
                        },
                        itemStyle:{
                            color:'#55A5FF'
                        },
                        label: {
                            show: true,
                        },
                    }]
                };


                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        });
    })

    //实际业务额 月展示
    $("#month1").click(function () {
        $("#p5").removeClass('se');
        $("#p6").removeClass('yan');
        $("#p7").addClass('se');
        $("#p8").addClass('yan');
        $.ajax({
            url: "{:url('Console/order_month_yes')}",
            type: 'post',
            dataType: 'json',
            data: {},
            success: function(msg){

                var myChart = echarts.init(document.getElementById('two'));
                var option = {
                    xAxis: {
                        type: 'category',
                        data: msg.week,
                        nameTextStyle:{
                            fontSize:10
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#333',
                                type:'dashed'
                            }
                        },
                        axisTick:{

                        },
                        axisLabel:{

                        },
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ['#aaa', '#ddd']
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        nameLocation:'end',
                        axisLine:{

                        }
                    },
                    series: [{
                        data: msg.zong,
                        type: 'line',
                        smooth: true,
                        lineStyle:{
                            color:'#55A5FF',
                        },
                        itemStyle:{
                            color:'#55A5FF'
                        },
                        label: {
                            show: true,
                        },
                    }]
                };


                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        });
    })
    //实际业务额 周展示
    $("#week1").click(function () {
        $("#p7").removeClass('se');
        $("#p8").removeClass('yan');
        $("#p5").addClass('se');
        $("#p6").addClass('yan');
        $.ajax({
            url: "{:url('Console/order_week_yes')}",
            type: 'post',
            dataType: 'json',
            data: {},
            success: function(msg){

                var myChart = echarts.init(document.getElementById('two'));
                var option = {
                    xAxis: {
                        type: 'category',
                        data: msg.week,
                        nameTextStyle:{
                            fontSize:10
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#333',
                                type:'dashed'
                            }
                        },
                        axisTick:{

                        },
                        axisLabel:{

                        },
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ['#aaa', '#ddd']
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        nameLocation:'end',
                        axisLine:{

                        }
                    },
                    series: [{
                        data: msg.zong,
                        type: 'line',
                        smooth: true,
                        lineStyle:{
                            color:'#55A5FF',
                        },
                        itemStyle:{
                            color:'#55A5FF'
                        },
                        label: {
                            show: true,
                        },
                    }]
                };


                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        });
    })
</script>
<script>

    var myChart = echarts.init(document.getElementById('one'));

    var option = {
        xAxis: {
            type: 'category',
            data: {$week},
            axisLine:{
                lineStyle:{
                    color:'#333',
                    type:'dashed'
                }
            },
            axisTick:{

            },
            axisLabel:{

            },
            splitLine: {
                lineStyle: {
                    // 使用深浅的间隔色
                    color: ['#aaa', '#ddd']
                }
            }
        },
        yAxis: {
            type: 'value',
            nameLocation:'end',
            axisLine:{

            }
        },
        series: [{
            data: {$zong},
            type: 'line',
            smooth: true,
            lineStyle:{
               color:'#55A5FF',
            },
            itemStyle:{
                color:'#55A5FF'
            },
            label: {
                show: true,
            },
        }]
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
<script>
    var myChart = echarts.init(document.getElementById('two'));

    var option = {
        xAxis: {
            type: 'category',
            data: {$heng},
            axisLine:{
                lineStyle:{
                    color:'#333',
                    type:'dashed'
                }
            },
            axisTick:{

            },
            axisLabel:{

            },
            splitLine: {
                lineStyle: {
                    // 使用深浅的间隔色
                    color: ['#aaa', '#ddd']
                }
            }
        },
        yAxis: {
            type: 'value',
            nameLocation:'end',
            axisLine:{

            }
        },
        series: [{
            data: {$zong1},
            type: 'line',
            smooth: true,
            lineStyle:{
                color:'#55A5FF',
            },
            itemStyle:{
                color:'#55A5FF'
            },
            label: {
                show: true,
            },
        }]
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>